<template>
	<div>
		<div class="h2">活动列表</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="关键字">
							<a-input autocomplete="off" class="field-right" placeholder="请输入编号/标题搜索"
								v-decorator="[`key`]" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="状态">
							<a-select :allowClear="true" v-decorator="['state']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in ActivityStateList" :key="index"
									:value="item.Key">{{ item.Value }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<ClubSearch :span="8" label="学生组织" name="clubID" ref="clubID" @tap="searchValueFun"></ClubSearch>
					<ClubSearch :span="8" label="班级" name="classID" ref="classID" @tap="searchValueFun"></ClubSearch>
					<a-col :span="8">
						<a-form-item label="部门">
							<a-select :allowClear="true" v-decorator="['departCode']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in DepartCodeList" :key="index"
									:value="item.Code">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="申请时间">
							<a-range-picker v-decorator="['data']" />
						</a-form-item>
					</a-col>
					<ClubSearch :span="8" label="发起人" name="applyUserNo" ref="applyUserNo" @tap="searchValueFun">
					</ClubSearch>
					<ClubSearch :span="8" label="成员" name="memberNo" ref="memberNo" @tap="searchValueFun"></ClubSearch>
					<a-col :span="8" style="margin-top: 4px;">
						<a-button-group size="default" class="option">
							<a-button type="primary" @click="handleSearch">搜索</a-button>
							<a-button @click="handleReset">重置</a-button>
							<!-- <a-button type="primary" @click="seeList('','add')">新增</a-button> -->
							<a-button type="primary" @click="exportList()">导出</a-button>
							<a-button type="danger" class="btn" @click="deleteAllList">批量删除</a-button>
						</a-button-group>
					</a-col>
				</a-row>
			</a-form>
		</div>
		
		<!-- <div class="option">
			<a-button type="primary" class="btn" @click="seeList('','add')">新增</a-button>
			<a-button type="primary" class="btn" @click="exportList()">导出</a-button>
			<a-button type="danger" class="btn" @click="deleteAllList">批量删除</a-button>
		</div> -->
		<div style="margin-top:10px;">
			<el-table :data="data" ref="tableForm" v-loading="loading" border :max-height="tableHeight"
				@selection-change="handleSelectionChange" highlight-current-row style="width: 100%;">
				<el-table-column type="selection" width="55" fixed="left"></el-table-column>
				<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
				<el-table-column prop="No" label="编号" width="120" fixed="left">
					<template slot-scope="scope">
						{{ scope.row.No||'暂无' }}
					</template>
				</el-table-column>
				<el-table-column prop="Title" align="left" label="状态/类型/标题" min-width="330" fixed="left">
					<template slot-scope="scope">
						<div>
							<a-tag :color="colorFun(scope.row.State)">
								{{ ActivityStateList.filter(item => item.Key == scope.row.State).length > 0 ? ActivityStateList.filter(item => item.Key == scope.row.State)[0].Value : '暂无' }}
							</a-tag>
							<a-tag color="red">{{ scope.row.TypeName }}</a-tag>
						</div>
						<a @click="activityMessageShow(scope.row)">{{ scope.row.Title || scope.row.TypeItemName }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="ClubName" label="学生组织/班级" min-width="200">
					<template slot-scope="scope">
						{{ scope.row.ClubName || scope.row.ClassName }}
					</template>
				</el-table-column>
				<el-table-column prop="ChargeUserNo" label="发起人" min-width="100">
					<template slot-scope="scope">
						<div>{{ scope.row.ChargeUserNo }}</div>
						<div>{{ scope.row.ChargeUserName }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="MemberNum" label="参加人数" min-width="90" show-overflow-tooltip="">
				</el-table-column>
				<el-table-column prop="StartTime" label="开始时间/结束时间" min-width="160">
					<template slot-scope="scope">
						<div>{{ scope.row.StartTime }}</div>
						<div>{{ scope.row.EndTime }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="IsTop" label="是否置顶" min-width="90" show-overflow-tooltip="">
					<template slot-scope="scope">
						<a-tag :color="scope.row.IsTop?'green':'orange'">{{ scope.row.IsTop?'是':'否' }}</a-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="185" fixed="right">
					<template slot-scope="scope">
						<div>
							<!-- <a-tooltip placement="top">
								<template slot="title">修改</template>
								<i class="iconfont icon-editor1" style="color: #1890FF;"
									@click="seeList(scope.row, 'ActivityUpdate')"></i>
							</a-tooltip> -->
							<a-tooltip placement="top">
								<template slot="title">删除</template>
								<i class="iconfont icon-delete" style="color: red;"
									@click="deleteList(scope.row)"></i>
							</a-tooltip>
							<!-- <a-tooltip placement="top">
								<template slot="title">详情</template>
								<i class="iconfont icon-xiangqing" style="color: green;"
									@click="seeList(scope.row, 'ActivityDetail')"></i>
							</a-tooltip> -->
							<a-tooltip placement="top">
								<template slot="title">详情</template>
								<i class="iconfont icon-xiangqing" style="color: green;"
									@click="seeList(scope.row, 'ActivityUpdate')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">附件</template>
								<i class="iconfont icon-fujian" style="color: #1890FF;"
									@click="seeList(scope.row, 'AdminEnclosure')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">{{scope.row.IsTop?'取消置顶':'置顶'}}</template>
								<i class="iconfont icon-xueyuandaishenpi" style="color: #1890FF;"
									@click="DoSetTop(scope.row, 'DoSetTop')"></i>
							</a-tooltip>
						</div>
						<div>
							<a-tooltip placement="top">
								<template slot="title">签到</template>
								<i class="iconfont icon-guanli" style="color: #1890FF;"
									@click="seeList(scope.row, 'signSetIndex')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">人员</template>
								<i class="iconfont icon-chengyuan" style="color: red;"
									@click="seeList(scope.row,'ActivityManageMember')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">奖项管理</template>
								<i class="iconfont icon-huodong" style="color: green;"
									@click="seeList(scope.row,'ActivityMemberPrize')"></i>
							</a-tooltip>
							<i title="评价管理" class="iconfont icon-gonggao" style="color: #1890FF;"
								@click="seeList(scope.row,'ActivityEvaluation')"></i>
							<oprateBtn v-if="scope.row.State==5" title="补发积分" icon="icon-xuefen" color="hotpink"
								@tap="SendScore(scope.row)"></oprateBtn>
							<oprateBtn v-if="scope.row.IsNeedActivityJob" title="作业设置" icon="icon-shezhi"
								style="color: #24F519;" @tap="seeList(scope.row,'ActivityJobManage')"></oprateBtn>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"></el-pagination>
		</div>
		<addActivity v-show="addActivityIf" @closeFun="closeFun"></addActivity>
		<activityMessage :text="text" v-show="activityMessageIf" @closeFun="closeFun"></activityMessage>
	</div>
</template>

<script>
	import moment from 'moment';
	import addActivity from './addActivity';
	import activityMessage from './activityMessage';
	import Func from '@/utils/func';
	import Cache from '@/utils/cache';
	import ClubSearch from '@/components/SearchForm/ClubSearch.vue'
	import {
		getActivityPageList,
		DeleteActivity,
		GetActivityStateList,
		GetDepartList,
		GetClubPageListCommon,
		GetUserList,
		ManageActivityDoSendScore,
		ManageActivityDoSetTop
	} from '@/api/follow';
	const data = [];
	export default {
		components: {
			addActivity,
			activityMessage,
			ClubSearch
		},
		data() {
			return {
				data,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				addIf: false,
				text: {},
				visible: false,
				confirmLoading: false,
				itemId: '',
				departmentList: [],
				worklist: [],
				loading: false,
				values: {},
				pages: {
					pageIndex: 1,
					pageSize: 20
				},
				tableHeight: parseFloat(window.innerHeight - 160),
				DepartCodeList: [],
				ActivityStateList: [],
				ClubList: [],
				UserList: [],
				time: new Date(),
				ids: '',
				activityID: '',
				activityMessageIf: false,
				addActivityIf: false,
				requestUrl: this.global.requestUrl,
				token: Cache.get('token')
			};
		},
		computed: {},
		created() {
			this.getList();
			this.getOtherList();
		},
		activated() {
			this.getList();
		},
		methods: {
			moment,
			DoSetTop(text){
				console.log(text)
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定该改变当前活动的置顶状态吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						data.isTop=!text.IsTop;
						let res = await ManageActivityDoSetTop(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			SendScore(text){
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定为该活动补发积分吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await ManageActivityDoSendScore(data);
						if (res.data.code == 0) {
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			deleteAllList() {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请先选择要删除的数据！');
				} else {
					let that = this;
					this.$confirm({
						title: '提示',
						content: '确定要删除选中的数据吗？',
						okText: '确认',
						cancelText: '取消',
						async onOk() {
							let list = that.multipleSelection;
							for (let i = 0, len = list.length; i < len; i++) {
								let data = {};
								data.id = list[i].ID;
								let res = await DeleteActivity(data);
							}
							that.getList();
						}
					});
				}
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			colorFun(type) {
				let color = 'pink';
				switch (type) {
					case 0:
						color = 'pink';
						break;
					case 1:
						color = 'red';
						break;
					case 2:
						color = 'orange';
						break;
					case 3:
						color = 'green';
						break;
					case 4:
						color = 'cyan';
						break;
				}
				return color;
			},
			async fetchClub(value) {
				let myReg = /^[^a-zA-Z]+$/;
				if (value && value.length > 1) {
					let data = {};
					data.key = value;
					let res = await GetClubPageListCommon(data);
					this.ClubList = res.data.data;
				}
			},
			async fetchUser(value) {
				let myReg = /^[^a-zA-Z]+$/;
				if (value && value.length > 1) {
					let data = {};
					data.key = value;
					data.top = 20;
					let res = await GetUserList(data);
					this.UserList = res.data.data;
				}
			},
			searchValueFun(name, value) {
				this.values = {
					...this.values,
					[name]: value
				}
				console.log(this.values);
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					if (values.data && values.data.length > 0) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					this.values = {
						...this.values,
						...values
					};
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.$refs.clubID.value = undefined
				this.$refs.classID.value = undefined
				this.$refs.memberNo.value = undefined
				this.$refs.applyUserNo.value = undefined
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}
				if (!this.values.clubID) {
					this.values.clubID = this.$route.query.ID ? this.$route.query.ID : '';
				}
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				let res = await getActivityPageList(data);
				this.loading = false;
				this.data = res.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
				this.$refs.tableForm.bodyWrapper.scrollTop = 0
			},
			async getOtherList() {
				let res = await GetActivityStateList();
				this.ActivityStateList = res.data.data;
				let res1 = await GetDepartList();
				this.DepartCodeList = res1.data.data;
			},
			deleteList(text) {
				let that = this;
				this.$confirm({
					title: '提示',
					content: `您确定删除该活动吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = await DeleteActivity(data);
						if (res.data.code == 0) {
							that.getList();
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			},
			seeList(text, name) {
				if (name == 'add') {
					this.addActivityIf = true
				} else if (name == 'ActivityMemberPrize') {
					this.$router.push({
						name: name,
						query: {
							activityID: text.ID,
							TypeID: text.TypeID
						}
					});
				} else {
					this.$router.push({
						name: name,
						query: {
							ID: text.ID,
							TypeID: text.TypeID,
							ClubID: text.ClubID
						}
					});
				}

			},
			exportList() {
				this.form.validateFields((error, values) => {
					console.log(values);
					let data = {}
					if (values['data']) {
						data.startTime = values['data'][0].format('YYYY-MM-DD')
						data.endTime = values['data'][1].format('YYYY-MM-DD')
					}
					data.key = this.values.key
					data.typeID = this.values.typeID
					data.clubID = this.values.clubID
					data.classID = this.values.classID
					data.departCode = values.departCode
					data.state = values.state
					data.memberNo = this.values.memberNo
					data.applyUserNo = this.values.applyUserNo
					console.log(data);
					let hrefUrl = this.requestUrl + 'Manage/Activity/DoExport?userToken=' + encodeURIComponent(this
						.token)
					let hrefStr = ''
					for (let key in data) {
						if (data[key]) {
							hrefStr += key + '=' + data[key] + '&'
						}
					}
					window.open(hrefUrl + '&' + hrefStr, '_blank')
				})
			},
			activityMessageShow(item) {
				this.text = {
					...item,
					time: new Date()
				}
				this.activityMessageIf = true
			},
			closeFun(data) {
				this.addIf = false;
				this.activityMessageIf = false
				this.addActivityIf = false
				if (data == 1) {
					this.getList();
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;
	}

	/deep/.ant-form-item-label {
		width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker {
		width: 100%;
	}

	.option {
		margin-top: 0px;
		margin-bottom: 20px;
		overflow: hidden;

		.ant-btn {
			font-size: 12px;
		}
	}

	.foot {
		text-align: center;
		margin-top: 100px;
	}

	.el-pagination {
		margin-top: 10px;
	}

	/deep/.el-table td.is-left .cell {
		text-align: left !important;
	}
</style>
